<template>
    <!-- 添加SPU按钮 -->
    <el-button @click="emit('setState', 1)" :disabled="!category3Id" type="primary" icon="ele-CirclePlusFilled">添加SPU
    </el-button>

    <!-- SPU数据表格 -->
    <el-table :data="spuPageList" border stripe :style="{ margin: '30px 0 ' }">
        <el-table-column type="index" width="100" label="序号" align="center" />
        <el-table-column label="SPU名称" prop="spuName" />
        <el-table-column label="SPU描述" prop="description" />
        <el-table-column label="操作" width="300px" align="center">
            <template #="{ row, $inidex }">
                <el-button type="primary" @click="emit('setState', 2, row)" title="添加SKU" icon="ele-Plus"></el-button>
                <el-button type="primary" @click="emit('setState', 1, row)" title="编辑SPU" icon="ele-Edit"></el-button>
                <el-button type="info" @click="showSkuList(row)" title="查看SKU" icon="ele-Warning"></el-button>
                <el-button type="danger" @click="deleteSpu(row.id)" title="删除SPU" icon="ele-Delete"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 页码 -->
    <el-pagination v-model:current-page="page" v-model:page-size="limit" :pager-count="7" :total="total"
        :page-sizes="[3, 5, 7, 10]" layout="prev, pager, next , sizes, total"></el-pagination>


    <!-- sku列表弹窗 -->
    <el-dialog v-model="dialogTableVisible" title="skuList">
        <el-table :data="skuListData">
            <el-table-column prop="skuName" label="名称" />
            <el-table-column prop="price" label="价格" width="100px" />
            <el-table-column prop="weight" label="重量" width="100px" />
            <el-table-column label="图片" align="center">
                <template v-slot="{ row }">
                    <img :src="row.skuDefaultImg" width="120">
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

</template>

<script lang="ts">
import { defineComponent } from "vue";
import { storeToRefs } from "pinia";

export default defineComponent({
    name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref, watch } from "vue"
import useAttrStore from "@/stores/attr";
import { requestDeleteSpu, requestSpuList } from "@/api/spu"
import type { SpuInfoType } from "@/api/spu"
import { ElMessage } from 'element-plus'
import { requestFindBySpuId, type SkuInfoListType } from "@/api/sku"
const attrStore = useAttrStore()
const { category3Id } = storeToRefs(attrStore)

//定义页码数据
const page = ref(1)
const limit = ref(10)
const total = ref(0)
//定义spu分页列表数据
const spuPageList = ref<SpuInfoType[]>([])

//封装函数请求sup分页列表
const getSpuPageList = async () => {
    try {
        //发送获取sup分页列表请求
        const result = await requestSpuList(page.value, limit.value, category3Id.value as number)
        //把返回值中的sup分页列表数据给响应式数据
        spuPageList.value = result.records
        //把数据总条数给响应式数据
        total.value = result.total
    } catch (error) {
        //失败提示
        ElMessage.error("请求spu分页列表失败!")
    }
}
//1.监听category3Id改变请求spu分页列表
watch(category3Id, () => {
    //category3Id为null的时候清空spu分页列表和数据总条数 不执行
    if (category3Id.value === null) {
        //清空sup分页列表数据
        spuPageList.value = []
        //清空总数据条数
        total.value = 0
        return
    }
    //监听category3Id改变发送请求
    getSpuPageList()
}, { immediate: true })

//2.监听页码改变发送spu分页请求
watch([page, limit], () => {
    if (category3Id.value === null) return;
    getSpuPageList()
})

//3.接收父组件传递的自定义事件,点击新增spu或修改spu的时候执行
const emit = defineEmits<{
    (event: 'setState', state: number, row?: SpuInfoType): void
}>()

//4.删除spu
const deleteSpu = async (spuId: number) => {
    try {
        await requestDeleteSpu(spuId)
        ElMessage.success("删除成功!")
        //删除成功重新请求分页列表
        getSpuPageList()
    } catch (error) {
        ElMessage.error("删除spu失败!")
    }
}


//对应数据控制sku列表弹窗的显示隐藏
const dialogTableVisible = ref(false)
//对应数据保存skuList数据
const skuListData = ref<SkuInfoListType>([])
//5.查看sku列表
const showSkuList = async (row: SpuInfoType) => {
    //显示弹窗
    dialogTableVisible.value = true
    try {
        //请求skuList数据
        const result = await requestFindBySpuId(row.id as number)
        //请求回来的数据保存在数据中
        skuListData.value = result
    } catch {
        //失败提示
        ElMessage.error("请求sku列表失败!")
    }
}

</script>